<template>
  <div class="container">
    <el-row class="topTitleBox">
      <el-col class="topTitle">
        <el-col :span="16"
          ><div class="leftBox">
            <div>
              <i class="icon iconfont iconfanhui1" @click="goBack"></i
              >&nbsp;2019年湖北省对地级市的第四季度考核
            </div>
            <div class="explain">
              考核周期：2019年10月-2019年12月 被考核地区：荆门市
            </div>
          </div></el-col
        >
        <el-col :span="8">
          <div class="rightBox">
            <el-row type="flex" justify="end">
              <el-col :span="8"
                ><div class="totalScore">
                  <h3>总分</h3>
                  <p class="mainColor">100分</p>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="selfScore">
                  <h3>自评分</h3>
                  <p class="mainColor">80分</p>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="selfScore">
                  <h3>上级评分</h3>
                  <p class="mainColor">80分</p>
                </div></el-col
              >
            </el-row>
          </div></el-col
        >
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-row type="flex">
        <el-col :xl="7" :lg="7" :md="8" :sm="7" class="checkItems">
          <el-row>
            <el-col :span="6">考核项</el-col>
          </el-row>
          <el-row class="itemBox">
            <el-col :span="24">
              <el-col
                :span="6"
                v-for="(item, index) in checkItemsList"
                :key="index"
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.content"
                  placement="top-start"
                >
                  <el-button size="mini" type="info" plain class="itemBtn">{{
                    item.itemBtn
                  }}</el-button>
                </el-tooltip>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xl="17" :lg="17" :md="16" :sm="17" class="checkInfo">
          <div class="itemTitle">
            <h4>
              15、落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作
            </h4>
          </div>
          <el-table :data="tableList" border style="width: 100%">
            <el-table-column
              prop="scale"
              label="评分标准"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="score"
              label="自评得分"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="exeam"
              label="上级评分"
              align="center"
            ></el-table-column>
          </el-table>
          <el-row class="selfReport">
            <el-col :span="24">自评说明：</el-col>
            <el-col :span="24">
              <p>
                落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作落实由政府负责人担任召集人的工作协调
              </p>
            </el-col>
          </el-row>
          <el-row class="selfReport">
            <el-col :span="24" :style="{ marginBottom: '14px' }"
              >自评支持材料：</el-col
            >
            <el-col :span="24">
              <el-row class="material">
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/word.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/rar.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/word.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
              </el-row>
              <el-row class="material">
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/word.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/rar.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/word.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="selfReport">
            <el-col :span="24">考核评定说明：</el-col>
            <el-col :span="24">
              <p>
                落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作落实由政府负责人担任召集人的工作协调
              </p>
            </el-col>
          </el-row>
          <el-row class="selfReport">
            <el-col :span="24" :style="{ marginBottom: '14px' }"
              >评定支持材料：</el-col
            >
            <el-col :span="24">
              <el-row class="material">
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/word.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/rar.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/word.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
              </el-row>
              <el-row class="material">
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/word.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/rar.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
                <el-col :lg="8" :md="12" :sm="12">
                  <el-col :span="4"
                    ><img src="/static/img/word.png" alt=""
                  /></el-col>
                  <el-col :span="20">
                    <div>项目评价模型.docx<span>（133.7k）</span></div>
                    <div>
                      <el-link type="primary">下载</el-link>
                      <el-link type="primary">打开</el-link>
                    </div>
                  </el-col>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="upToNextBtn">
            <el-button type="primary">上一项</el-button>
            <el-button type="primary">下一项</el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import uploadInput from '@/components/publicCom/uploadInput.vue'
export default {
  name: 'checkQueryDetail',
  data() {
    return {
      checkItemsList: [
        {
          content: '第一项',
          itemBtn: 1,
        },
        {
          content: '第二项',
          itemBtn: 2,
        },
        {
          content: '第三项',
          itemBtn: 3,
        },
        {
          content: '第四项',
          itemBtn: 4,
        },
        {
          content: '第五项',
          itemBtn: 5,
        },
        {
          content: '第六项',
          itemBtn: 6,
        },
        {
          content: '第七项',
          itemBtn: 7,
        },
        {
          content: '第八项',
          itemBtn: 8,
        },
        {
          content: '第九项',
          itemBtn: 9,
        },
        {
          content: '第十项',
          itemBtn: 10,
        },
        {
          content: '第十一项',
          itemBtn: 11,
        },
        {
          content: '第十二项',
          itemBtn: 12,
        },
        {
          content: '第十三项',
          itemBtn: 13,
        },
        {
          content: '第十四项',
          itemBtn: 14,
        },
        {
          content: '第十五项',
          itemBtn: 15,
        },
        {
          content: '第十六项',
          itemBtn: 16,
        },
      ],
      isCheck: false,
      isChecking: false, //正在被考核项
      //表格数据
      tableList: [{ scale: '0.5分', score: '0.3分', exeam: '0.5分' }],
      formData: {
        score: '',
        explain: '',
        fileList: [],
      },
      upLoadFile: [],
      uploadUrl: 'api-f/files/upload',
      formRules: {},
    }
  },
  components: {
    uploadInput,
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    delFile(index) {
      this.upLoadFile.splice(index, 1)
    },
    // 获取子组件上传成功后的值
    getData(data) {
      this.upLoadFile.push(data)
    },
    successCallBack() {},
    errorCallBack() {},
  },
}
</script>
<style scoped lang="less">
.mainColor {
  color: #009588;
}
.topTitleBox {
  padding: 0 24px;
}
.topTitle {
  background-color: #fff;
  border-bottom: 1px solid #e3e7e9;
  height: 94px;
  padding: 24px 0;
  font-family: 'Microsoft YaHei';
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  .leftBox {
    color: #333;
    .explain {
      padding: 5px 0 0 16px;
      line-height: 20px;
      font-size: 14px;
      font-weight: normal;
      color: #999;
    }
  }
  .rightBox {
    text-align: center;
    h3 {
      color: #333;
      font-size: 16px;
    }
  }
  .saveBtn {
    margin: 0 24px 0 0 !important;
  }
}

.mainCon {
  padding-left: 24px;
  padding-right: 24px;
  height: calc(100% - 94px);
  overflow-y: auto;
  .checkItems {
    border-right: 2px dashed #ebeef5;
    .itemBox {
      margin-top: 20px;
      .itemBtn {
        width: 45px;
        height: 40px;
        margin-bottom: 10px;
        color: #333;
        font-size: 14px;
      }
    }
  }
  .checkInfo {
    padding-left: 40px;
    .itemTitle {
      margin-bottom: 20px;
      p {
        margin-left: 25px;
        font-size: 14px;
        color: #999;
      }
    }
    .selfReport {
      margin: 24px 0;
      p {
        margin-top: 14px;
        line-height: 24px;
        color: #999;
        font-size: 14px;
      }
      .material {
        font-size: 12px;
        span {
          color: #999;
        }
        .el-link {
          font-size: 12px;
        }
      }
    }
    .upToNextBtn {
      float: right;
      .el-button {
        background-color: #fff;
        color: #009588;
        border: 1px solid #009588;
      }
    }
  }
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}
/deep/ .el-input {
  width: 95%;
}
.saveBtn {
  padding: 10px 20px;
  background-color: #009588;
  border-color: #009588;
  color: #fff;
}

//已考核
.checkBtn {
  background: #009588 !important;
  color: #fff !important;
}
.checkingBtn {
  background: #999 !important;
  color: #fff !important;
}
</style>
